<template>
  <div class="accumulate-charge-detail">
    <Head title="活动信息" isBack>
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm"
          :detail="data.detailData"
          :labelWidth="80"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="活动配置">
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm1"
          :detail="data.detailData"
          :labelWidth="80"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="可参与用户">
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm2"
          :detail="data.detailData"
          :labelWidth="80"
          align="left"
        ></Detail>
      </template>
    </Head>
    <div class="edit-wrap">
      <Head title="用户参与记录">
        <template #content>
          <Table
            ref="tableRef"
            :url="URL_PAGINGACTIVITYRECORD"
            :columns="data.columns"
            :toolbar="data.toolbar"
            :query="data.query"
            :params="{ activityId: id, type: 6 }"
          ></Table>
        </template>
      </Head>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import Table from '@/components/table/index.vue';
import {
  getUserActivityById,
  URL_PAGINGACTIVITYRECORD,
  EXPORT_ACTIVITYRECORD,
} from '@/service/apis/market';
import { queryDicByParent } from '@/service/apis/api';
import { exportFile } from '@/utils/utils';
import { ACTIVITY_TYPE } from '@/utils/dictionaries';

const route = useRoute();
const {
  query: { id },
} = route;

const tableRef = ref();

queryDicByParent({
  listDtos: ['stationTargetType', 'stationActivityTargetType', 'level'],
}).then((res: any) => {
  if (res) {
    detailForm1[1].dic = res.level;
    detailForm1[detailForm1.length - 1].dic = res.stationTargetType;
    detailForm2[0].dic = res.stationActivityTargetType;
    data.query[3].props.options = res.level;
    data.columns[5].dic = res.level;
  }
});

const detailForm: any = reactive([
  {
    label: '活动名称',
    prop: 'name',
  },
  {
    label: '活动日期',
    prop: 'startTime',
    template: (row: any, index: number) => {
      if (row.startTime && row.endTime) {
        return `${row.startTime}~${row.endTime}`;
      }
      return '--';
    },
  },
  {
    label: '活动说明',
    prop: 'introduce',
    comName: 'textarea',
  },
]);

const detailForm1: any = reactive([
  {
    label: '消费维度',
    prop: 'qualifiedType',
    dic: ACTIVITY_TYPE,
    comName: 'radio',
  },
  {
    label: '奖励梯度',
    prop: 'rewardGradient',
    comName: 'radio',
  },
  {
    label: '活动电站',
    prop: 'stationType',
    comName: 'radio',
    dic: [] as any,
    type: Number,
  },
]);

const detailForm2: any = reactive([
  {
    label: '限制用户',
    prop: 'targetType',
    comName: 'radio',
    dic: [] as any,
    type: Number,
  },
]);

const data = reactive({
  detailData: [] as any,
  columns: [
    {
      prop: 'orgName',
      label: '归属企业',
    },
    {
      prop: 'userNumber',
      label: '用户账号',
    },
    {
      prop: 'userName',
      label: '用户姓名',
    },
    {
      prop: 'mobile',
      label: '手机号',
    },
    {
      prop: 'qualifiedAmount',
      label: '累计消费金额/充电度数',
    },
    {
      prop: 'level',
      label: '已达到奖励梯度',
      dic: [] as any,
      type: Number,
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'registerActivityList.export',
      icon: 'icon-export',
      type: 'primary',
      handle: (row: any) => {
        console.log('导出---', row);
        exportFile(
          EXPORT_ACTIVITYRECORD,
          '累计消费活动参与用户',
          tableRef.value?.getForm()
        );
      },
    },
  ],
  query: [
    {
      label: '归属企业',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入归属企业',
      },
    },
    {
      label: '用户账号',
      prop: 'userNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
    {
      label: '手机号',
      prop: 'mobile',
      comName: 'input',
      props: {
        placeholder: '请输入手机号',
      },
    },
    {
      label: '已达到奖励梯度',
      prop: 'level',
      comName: 'select',
      props: {
        placeholder: '请选择奖励梯度',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
  ],
});

const getHtml = (row: any, data: any) => {
  let html = '<div>--</div>';
  if (row.qualifiedType === 2) {
    html = `<div>充电电量：${data[0].qualifiedAmount}度</div>`;
  } else if (row.qualifiedType === 3) {
    html = `<div>消费金额：${data[0].qualifiedAmount}元</div>`;
  }
  data.forEach((item: any, index: number) => {
    html += `<div class="coupon-row">优惠券${index + 1}：${item.couponName} ${
      item.couponCount
    }张</div>`;
  });
  return html;
};

getUserActivityById(id).then((res: any) => {
  data.detailData = res;

  data.detailData.rewardGradient = '0';
  if (res.detailMap.hasOwnProperty('0')) {
    detailForm1.splice(2, 0, {
      label: '一级配置',
      prop: 'name',
      template: (row: any, inx: number) => {
        return getHtml(row, res.detailMap[0]);
      },
    });
  }
  if (res.detailMap.hasOwnProperty('1')) {
    data.detailData.rewardGradient = '1';
    detailForm1.splice(3, 0, {
      label: '二级配置',
      prop: 'name',
      template: (row: any, inx: number) => {
        return getHtml(row, res.detailMap[1]);
      },
    });
  }
  if (res.detailMap.hasOwnProperty('2')) {
    data.detailData.rewardGradient = '2';
    detailForm1.splice(4, 0, {
      label: '三级配置',
      prop: 'name',
      template: (row: any, inx: number) => {
        return getHtml(row, res.detailMap[2]);
      },
    });
  }

  // 电站树
  if (res.stationType != 0) {
    detailForm1.push({
      label: '',
      prop: 'stationTree',
      comName: 'tree',
      dic: res.stationTree,
    });
  }

  // 用户树
  if (res.targetType !== 0) {
    detailForm2.push({
      label: '',
      prop: 'targetTree',
      comName: 'tree',
      dic: res.targetTree,
    });
  }
});
</script>

<style lang="scss" scoped>
:deep(.coupon-row) {
  padding-top: 12px;
}
</style>